<template>
    <div>
        <div class="show-pc">
            <div>
                <div class="home_right_icon">
                    <div @click="setModal1Visible">
                        <div><img src="@/assets/images/Md-img/铃铛消息.png" class="icfonPng" /></div>

                    </div>
                    <div class="line"></div>
                    <div>
                        <div><img src="../../../assets/images/Md-img/head.png" class="icfonPng_2" /></div>
                    </div>
                </div>
            </div>

            <!-- 消息弹窗 -->
            <div id="components-modal-demo-position">
                <a-modal v-model:open="modal1Visible" :centered="true" width="39.3vw" @ok="setModal1Visible(false)"
                    :footer="null" :bodyStyle="{ height: '30.3vw', }">
                    <template #title>
                        <div class="title-slot">
                            消息通知
                        </div>
                    </template>
                    <div>
                        <a-tabs v-model:activeKey="activeKey">
                            <a-tab-pane key="1" tab="系统消息">
                                <div class="pro-promotion">
                                    <a-list item-layout="horizontal" :data-source="fansData" class="fans-list">
                                        <a-collapse v-model:activeKey="activeMessage" :bordered="false"
                                            class="custom-collapse" expandIconPosition="end" accordion>
                                            <template #expandIcon="{ isActive }">
                                                <div style="display: flex; align-items: center;">
                                                    <RightOutlined :rotate="isActive ? -90 : 90" :style="{
                                                        fontSize: '17px',
                                                    }" />
                                                    <span class="custom-state" style="margin-left: 8px">{{ isActive ?
                                                        '收起' :
                                                        '展开' }}</span>
                                                </div>
                                            </template>

                                              <!-- <template #expandIcon="{ isActive }">
                                                <div style="display: flex; align-items: center;">
                                                    <DownOutlined :rotate="isActive ? 180 : 0"
                                                        :style="{ fontSize: '17px', transition: 'transform 0.3s' }" />
                                                </div>
                                            </template> -->
                                            <a-collapse-panel v-for="(item, index) in messagelist">
                                                <template #header>
                                                    <div class="custom-header">
                                                        <div class="custom-title">
                                                            {{ item.title }}
                                                        </div>
                                                        <div class="custom-Time">
                                                            {{ item.Time }}
                                                        </div>
                                                    </div>
                                                </template>

                                                <p class="MessageItem">{{ item.MessageContent }}</p>
                                            </a-collapse-panel>
                                        </a-collapse>
                                    </a-list>
                                </div>
                            </a-tab-pane>
                            <a-tab-pane key="2" tab="点赞通知" force-render>
                                <a-list item-layout="horizontal" :data-source="fansData" class="fans-list">
                                    <div class="praise_box" v-for="(item, index) in designWorks">
                                        <div class="praise_top">
                                            <div><img :src="item.nameimgUrl" alt="" class="userimg">
                                            </div>
                                            <div>
                                                <div class="userinfo">
                                                    <div class="userinfo_title">{{ item.title }}</div>
                                                    <!-- <div class="intro_text">
                                                        <div>重庆项目</div>
                                                        <div>设计部</div>
                                                        <div>设计师</div>
                                                    </div> -->
                                                </div>
                                                <div class="upvote">点赞了你的作品</div>
                                                <div class="WorkTime">2025</div>

                                            </div>
                                        </div>
                                        <div>
                                            <div class="works_box">
                                                <div>
                                                    <div style="display: flex; justify-content: center;">
                                                        <img :src="item.imgUrl" class="works_img" alt="">
                                                    </div>
                                                    <div class="works_text">{{ item.description }}</div>
                                                </div>
                                                <div class="works_Time">
                                                    <div>{{ item.date }}</div>
                                                    <div>{{ item.tag }}</div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </a-list>

                            </a-tab-pane>

                        </a-tabs>
                    </div>





                </a-modal>
            </div>








        </div>

        <div class="show-wap">
            <div @click="toggleTheme">
                <div><img src="../../../assets/images/new_img/yueliang.png" class="icfonPng" /></div>

            </div>
        </div>
    </div>



</template>

<script setup>
import { ref } from 'vue';
import { useStore } from '@/store'
const { themeStore } = useStore()
const modal1Visible = ref(false);
import img_8 from "../../../assets/images/local_img/img_6.png"
import img_10 from "../../../assets/images/local_img/img_10.png"

const activeKey = ref('1');

// 切换主题
const toggleTheme = () => {
    themeStore.changeTheme()
}

const setModal1Visible = () => {
    modal1Visible.value = open;
};

// 消息通知折叠面板
const activeMessage = ref(['1']);


watch(activeMessage, val => {
    console.log('activeKey', val);
});

const messagelist = ref([
    {
        title: "今天星期天",
        Time: ' 2025.10.16',
        MessageContent: '再不怕收藏空间告急，这些干货定能在项目中绽放价值所有点赞内容自动记录，每次打开都是升级版灵感库叟索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞装】个人主页专属勋章+电子证书，在优设网自带BUFF学】价值30元的优设课堂无门槛优惠券，升级PRO直接领'
    },
    {
        title: "今天星期天1",
        Time: ' 2025.10.16',
        MessageContent: '再不怕收藏空间告急，这些干货定能在项目中绽放价值所有点赞内容自动记录，每次打开都是升级版灵感库叟索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞装】个人主页专属勋章+电子证书，在优设网自带BUFF学】价值30元的优设课堂无门槛优惠券，升级PRO直接领'
    },
    {
        title: "今天星期天2",
        Time: ' 2025.10.16',
        MessageContent: '再不怕收藏空间告急，这些干货定能在项目中绽放价值所有点赞内容自动记录，每次打开都是升级版灵感库叟索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞装】个人主页专属勋章+电子证书，在优设网自带BUFF学】价值30元的优设课堂无门槛优惠券，升级PRO直接领'
    },
    {
        title: "今天星期天",
        Time: ' 2025.10.16',
        MessageContent: '再不怕收藏空间告急，这些干货定能在项目中绽放价值所有点赞内容自动记录，每次打开都是升级版灵感库叟索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞装】个人主页专属勋章+电子证书，在优设网自带BUFF学】价值30元的优设课堂无门槛优惠券，升级PRO直接领'
    },
    {
        title: "今天星期天",
        Time: ' 2025.10.16',
        MessageContent: '再不怕收藏空间告急，这些干货定能在项目中绽放价值所有点赞内容自动记录，每次打开都是升级版灵感库叟索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞装】个人主页专属勋章+电子证书，在优设网自带BUFF学】价值30元的优设课堂无门槛优惠券，升级PRO直接领'
    },
    {
        title: "今天星期天",
        Time: ' 2025.10.16',
        MessageContent: '再不怕收藏空间告急，这些干货定能在项目中绽放价值所有点赞内容自动记录，每次打开都是升级版灵感库叟索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞装】个人主页专属勋章+电子证书，在优设网自带BUFF学】价值30元的优设课堂无门槛优惠券，升级PRO直接领'
    },
    {
        title: "今天星期天",
        Time: ' 2025.10.16',
        MessageContent: '再不怕收藏空间告急，这些干货定能在项目中绽放价值所有点赞内容自动记录，每次打开都是升级版灵感库叟索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞装】个人主页专属勋章+电子证书，在优设网自带BUFF学】价值30元的优设课堂无门槛优惠券，升级PRO直接领'
    },
    {
        title: "今天星期天",
        Time: ' 2025.10.16',
        MessageContent: '再不怕收藏空间告急，这些干货定能在项目中绽放价值所有点赞内容自动记录，每次打开都是升级版灵感库叟索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞装】个人主页专属勋章+电子证书，在优设网自带BUFF学】价值30元的优设课堂无门槛优惠券，升级PRO直接领'
    },
    {
        title: "今天星期天",
        Time: ' 2025.10.16',
        MessageContent: '再不怕收藏空间告急，这些干货定能在项目中绽放价值所有点赞内容自动记录，每次打开都是升级版灵感库叟索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞装】个人主页专属勋章+电子证书，在优设网自带BUFF学】价值30元的优设课堂无门槛优惠券，升级PRO直接领'
    },
    {
        title: "今天星期天",
        Time: ' 2025.10.16',
        MessageContent: '再不怕收藏空间告急，这些干货定能在项目中绽放价值所有点赞内容自动记录，每次打开都是升级版灵感库叟索】输入关键词快速检索，再也不用担心收藏夹变成灵感黑洞装】个人主页专属勋章+电子证书，在优设网自带BUFF学】价值30元的优设课堂无门槛优惠券，升级PRO直接领'
    }

])


// 点赞数据
const designWorks = ref([
    {
        id: 1,
        title: '候马心购',
        description: '春秋时期就闻名的驿站，如何重新火起来',
        date: '2025-03-24',
        tag: '企业形象设计',
        imgUrl: img_8,
        nameimgUrl: "https://imgs.699pic.com/images/500/472/262.jpg!list1x.v2",
        likers: [
            {
                id: 2,
                avatar: 'https://randomuser.me/api/portraits/men/32.jpg'
            },
            {
                id: 3,

                avatar: 'https://randomuser.me/api/portraits/women/33.jpg'
            },
            {
                id: 4,

                avatar: 'https://randomuser.me/api/portraits/men/34.jpg'
            },
            {
                id: 5,

                avatar: 'https://randomuser.me/api/portraits/women/35.jpg'
            }
        ],
        interactionText: '等6人点拨了你的作品',
        interactionDate: '2025/3/25'
    },
    {
        id: 2,
        title: '乐汇精品生活超市全案设计',
        description: '如何重新火起来',
        date: '2025-03-30',
        imgUrl: img_10,
        nameimgUrl: "https://imgs.699pic.com/images/500/472/262.jpg!list1x.v2",
        tag: '企业形象2222',
        likers: [],
        interactionText: '点赞了你的作品',
        interactionDate: '2025/3/26'
    },
    {
        id: 2,
        title: '乐汇精品生活超市全案设计',
        description: '如何重新火起来',
        date: '2025-03-30',
        imgUrl: img_10,
        nameimgUrl: "https://imgs.699pic.com/images/500/472/262.jpg!list1x.v2",
        tag: '企业形象2222',
        likers: [],
        interactionText: '点赞了你的作品',
        interactionDate: '2025/3/26'
    }
]);







</script>

<style lang="less" scoped>
.home_right_icon {
    width: 4.16vw;

    display: flex;
    gap: 0.8vw;
    // justify-content: space-between;
    align-items: center;
    font-size: 20px;
    color: #666;
    // margin-left: 10px;

    .line {
        width: 0px;
        height: 0.52vw;
        color: #666;
        border: 1px solid #c3c0c0;
        // margin-top: 6px;

    }

    .icfonPng {
        width: 1.2vw;
        height: 1.2vw;
    }

    .icfonPng_2 {
        width: 1.2vw;
        height: 1.2vw;
    }
}

.title-slot {
    text-align: center;
    width: 100%;
    color: var(--color-text-3);
    font-size: var(--text-22);
}


:deep(.ant-tabs-tab-btn) {
    font-size: var(--text-16);
    color: var(--color-text);

}

/* 取消 tab 标题的 hover 效果 */
:deep(.ant-tabs-tab:hover) {
    background-color: transparent;
    color: inherit;
}

/* 取消选中态 tab 标题的 hover 效果 */
:deep(.ant-tabs-tab-active:hover) {
    background-color: transparent;
    color: inherit;
}

/* 设置选中标签的字体颜色 */
:deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #a11f24 !important;
}

/* 设置选中标签下方的横线样式 */
:deep(.ant-tabs-ink-bar) {
    background-color: #a11f24;
}


// 折叠面板
.pro-promotion {
    margin: 0 auto;



}

.fans-list {
    height: 28vw;
    overflow-y: auto;
    border-radius: 8px;
}

.custom-collapse {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .custom-state {
        font-size: var(--text-14);
        color: var(--color-text);
    }


    .MessageItem {
        font-size: var(--text-16);
        color: var(--color-text-3);
    }
}

/* 头部样式 */
.custom-collapse :deep(.ant-collapse-header) {
    padding: 12px 16px;
    background: transparent;
    border: none !important;
    font-size: 16px;
    display: flex;
    align-items: center;

    .custom-header {


        display: flex;
        justify-content: space-between;
        align-items: center;

        .custom-title {
            font-size: var(--text-16);
            color: var(--color-text-3);
        }

        .custom-Time {
            font-size: var(--text-14);
            color: var(--color-text);
            margin-right: 0.52vw;
        }
    }

}


// 完全移除背景色并设置高度 
.custom-collapse :deep(.ant-collapse),
.custom-collapse :deep(.ant-collapse-item),
.custom-collapse :deep(.ant-collapse-content) {
    background: transparent !important;
}

//  设置整体容器高度 
.custom-collapse {
    // height: 300px;
    border-bottom: 1px solid #dcdcdc;
    border-radius: 0px;
    box-shadow: none !important;

}

/* 头部样式 */
.custom-collapse :deep(.ant-collapse-header) {
    height: 3.8vw;
    background: transparent !important;
    padding: 12px 0;
}

//  内容区域高度控制 
.custom-collapse :deep(.ant-collapse-content-box) {
    height: calc(100% - 48px);
    /* 根据容器高度计算内容高度 */
    overflow-y: auto;
    /* 内容超出时滚动 */
    padding: 16px 0;
}

//  移除所有边框 
.custom-collapse :deep(.ant-collapse > .ant-collapse-item) {
    border-bottom: none !important;
}

// 点赞通知
.praise_box {
    width: 95%;
    margin: 0 auto;
    margin: 20px;
    padding: 30px 0px;

    // border: 1px solid red;
    border-bottom: 3px solid #f3f3f3;
}

.praise_box {

    .praise_top {
        display: flex;

        gap: 14px;

        .userimg {
            width: 1.92vw;
            height: 1.92vw;
            border-radius: 50px;
        }

        .userinfo {
            display: flex;
            gap: 10px;

            .userinfo_title {
                font-size: var(--text-16);
                color: var(--color-text-3);
                font-weight:900;
            }

            // .intro_text {
            //     display: flex;
            //     align-items: center;
            //     gap: 8px;
            //     font-size: 12px;
            //     color: var(--color-text-6);
            // }


        }

        .upvote {
            color: var(--color-text-6);
            font-size: var(--text-14);

        }

        .WorkTime {
            color: var(--color-text-6);
            font-size: var(--text-12);
        }


    }

    .works_box {
        width: 18vw;
        height: auto;
        padding-top: 30px;
        margin-top: 20px;
        background-color: var(--color-bg-3b);
        border-radius: 10px;
        display: grid;
        align-items: center;

        .works_img {

            width: 95%;
            height: 10vw;
            border-radius: 10px;

        }

        .works_text {
            color: var(--text-16);
            font-size: var(--text-16);
            margin: 8px;
        }

        .works_Time {
            display: flex;
            justify-content: space-between;
            margin: 10px;
            font-size: var(--text-14);
            color: var(--color-text-6);
        }
    }

}
</style>